import React, { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom'
import { DownFill, SearchOutline, RightOutline } from 'antd-mobile-icons'
import {Swiper } from 'antd-mobile'
import '../KFR_css/fuwu.css'

export default function List() {
  const imgs = ['/KFR_imgs/1.webp', '/KFR_imgs/2.webp', '/KFR_imgs/3.webp', '/KFR_imgs/4.webp']
  const items = imgs.map((img, index) => (
    <Swiper.Item key={index}>
      <div className="content">
        <img src={img} />
      </div>
    </Swiper.Item>
  ))
  const [hospitals, sethospitals] = useState([
    {
      id: 1,
      name: '北京协和医院',
      sp_department: '内科',
      address: '北京市东城区帅府园一号',
      distance: '0.5km',
      img: '/KFR_imgs/3.webp'
    },
    {
      id: 2,
      name: '中国人民解放军总医院',
      sp_department: '中医肾病科、中医血液病科',
      address: '北京市海淀区复兴路28号',
      distance: '22.3.km',
      img: '/KFR_imgs/4.webp'
    },
    {
      id: 3,
      name: '北京大学第三医院',
      sp_department: '综合、骨科、消化科',
      address: '北京大学第三医院机场院区',
      distance: '0.5km',
      img: '/KFR_imgs/1.webp'
    },
    {
      id: 4,
      name: '北京大学人民医院',
      sp_department: '妇产科、内科、外科、中医科',
      address: '北京市西城区西直门南大街11号',
      distance: '13.9km',
      img: '/KFR_imgs/2.webp'
    },
  ])
  const [packages, setpackages] = useState([
    {
      id: 1,
      name: '普通入职体检套餐 1',
      price: 286,
      sold: 157,
      address: '北京市海淀区复兴路28号',
      distance: '31.80km',
      img: '/KFR_imgs/1.png'
    },
    {
      id: 2,
      name: '普通入职体检套餐 2',
      price: 166,
      sold: 203,
      address: '北京市海淀区复兴路45号',
      distance: '23.56km',
      img: '/KFR_imgs/1.png'
    },
    {
      id: 3,
      name: '普通入职体检套餐 3',
      price: 423,
      sold: 100,
      address: '北京大学第三医院机场院区',
      distance: '13.02km',
      img: '/KFR_imgs/1.png'
    },
    {
      id: 4,
      name: '普通入职体检套餐 4',
      price: 326,
      sold: 225,
      address: '北京市海淀区复兴路28号',
      distance: '10.20km',
      img: '/KFR_imgs/1.png'
    },
  ])
  const [doctors, setdoctors] = useState([
    {
      id: 1,
      name: '张三',
      job: '副主任医师',
      section: '皮肤科',
      hospital: '复旦大学附属华山医院',
      issue: 3103,
      po_rate: '94%',
      text_price: 80,
      tel_price: 150,
      img: '/KFR_imgs/5.webp',
      be_good_at: [
        { id: 1, name: '白癜风' },
        { id: 2, name: '白内障' },
        { id: 3, name: '银屑病' },
        { id: 4, name: '湿疹' },
      ]
    },
    {
      id: 2,
      name: '李四',
      job: '副主任医师',
      section: '皮肤科',
      hospital: '复旦大学附属华山医院',
      issue: 3103,
      po_rate: '94%',
      text_price: 80,
      tel_price: 150,
      img: '/KFR_imgs/5.webp',
      be_good_at: [
        { id: 1, name: '白癜风' },
        { id: 2, name: '白内障' },
        { id: 3, name: '银屑病' },
        { id: 4, name: '湿疹' },
      ]
    },
    {
      id: 3,
      name: '王五',
      job: '副主任医师',
      section: '皮肤科',
      hospital: '复旦大学附属华山医院',
      issue: 3103,
      po_rate: '94%',
      text_price: 80,
      tel_price: 150,
      img: '/KFR_imgs/5.webp',
      be_good_at: [
        { id: 1, name: '白癜风' },
        { id: 2, name: '白内障' },
        { id: 3, name: '银屑病' },
        { id: 4, name: '湿疹' },
      ]
    },
    {
      id: 4,
      name: '赵六',
      job: '副主任医师',
      section: '皮肤科',
      hospital: '复旦大学附属华山医院',
      issue: 3103,
      po_rate: '94%',
      text_price: 80,
      tel_price: 150,
      img: '/KFR_imgs/5.webp',
      be_good_at: [
        { id: 1, name: '白癜风' },
        { id: 2, name: '白内障' },
        { id: 3, name: '银屑病' },
        { id: 4, name: '湿疹' },
      ]
    },
  ])
  const navigate=useNavigate()
  return (
    <div className="fuwu">
      <div className="fuwu_b1">
        <div className="fuwu_b1_1">
          <div className="fuwu_b1_1_1">
            <p>北京</p>
            <DownFill fontSize={18} />
          </div>
          <div className="fuwu_b1_1_2">
            <div className="fuwu_b1_1_2_1">
              <div className="fuwu_b1_1_2_1_1">
                <div className="fuwu_b1_1_2_1_1_1">
                  <SearchOutline fontSize={18} />
                </div>
                <div className="fuwu_b1_1_2_1_1_2">
                  搜索医院、医生、套餐
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="fuwu_b2">
        <div className="fuwu_b2_1">
          <Swiper
            loop
            autoplay>
            {items}
          </Swiper>
        </div>
        <div className="fuwu_b2_2">
          <div className="fuwu_b2_2_1">
            <svg onClick={()=>{navigate('/guah')}} t="1739000578606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5841" width="200" height="200"><path d="M651.636364 139.636364 372.363636 139.636364l0 46.545455 279.272727 0L651.636364 139.636364zM884.363636 139.636364l-69.818182 0 0 46.545455L884.363636 186.181818c25.693091 0 46.545455 20.852364 46.545455 46.545455l0 93.090909L93.090909 325.818182 93.090909 232.727273c0-25.693091 20.852364-46.545455 46.545455-46.545455l69.818182 0L209.454545 139.636364 139.636364 139.636364C88.203636 139.636364 46.545455 181.341091 46.545455 232.727273l0 628.363636c0 51.432727 41.658182 93.090909 93.090909 93.090909l744.727273 0c51.432727 0 93.090909-41.704727 93.090909-93.090909L977.454545 232.727273C977.454545 181.341091 935.796364 139.636364 884.363636 139.636364zM930.909091 861.090909c0 25.693091-20.852364 46.545455-46.545455 46.545455L139.636364 907.636364c-25.693091 0-46.545455-20.852364-46.545455-46.545455L93.090909 372.363636l837.818182 0L930.909091 861.090909zM290.909091 232.727273C310.178909 232.727273 325.818182 217.088 325.818182 197.818182l0-69.818182C325.818182 108.730182 310.178909 93.090909 290.909091 93.090909S256 108.730182 256 128l0 69.818182C256 217.088 271.639273 232.727273 290.909091 232.727273zM733.090909 232.727273c19.269818 0 34.909091-15.639273 34.909091-34.909091l0-69.818182C768 108.730182 752.360727 93.090909 733.090909 93.090909S698.181818 108.730182 698.181818 128l0 69.818182C698.181818 217.088 713.821091 232.727273 733.090909 232.727273zM267.636364 605.090909C299.752727 605.090909 325.818182 579.025455 325.818182 546.909091c0-32.162909-26.065455-58.181818-58.181818-58.181818-32.116364 0-58.181818 26.065455-58.181818 58.181818C209.454545 579.025455 235.52 605.090909 267.636364 605.090909zM500.363636 605.090909c32.116364 0 58.181818-26.065455 58.181818-58.181818 0-32.162909-26.065455-58.181818-58.181818-58.181818-32.116364 0-58.181818 26.065455-58.181818 58.181818C442.181818 579.025455 468.247273 605.090909 500.363636 605.090909zM733.090909 605.090909c32.116364 0 58.181818-26.065455 58.181818-58.181818 0-32.162909-26.065455-58.181818-58.181818-58.181818-32.116364 0-58.181818 26.065455-58.181818 58.181818C674.909091 579.025455 700.974545 605.090909 733.090909 605.090909zM267.636364 791.272727C299.752727 791.272727 325.818182 765.207273 325.818182 733.090909S299.752727 674.909091 267.636364 674.909091c-32.116364 0-58.181818 26.065455-58.181818 58.181818S235.52 791.272727 267.636364 791.272727zM500.363636 791.272727c32.116364 0 58.181818-26.065455 58.181818-58.181818s-26.065455-58.181818-58.181818-58.181818c-32.116364 0-58.181818 26.065455-58.181818 58.181818S468.247273 791.272727 500.363636 791.272727z" fill="#1296db" p-id="5842"></path></svg>
            挂号
          </div>
          <div className="fuwu_b2_2_2">
            <svg t="1739001149019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6323" width="200" height="200"><path d="M430.08 348.16H348.16V266.24H266.24v81.92H184.32v81.92h81.92v81.92h81.92V430.08h81.92zM941.056 791.04l-133.632-133.632c20.48-29.696 32.256-65.536 32.256-104.448 0-101.888-82.944-184.32-184.832-184.832-101.888 0-184.32 82.432-184.32 184.32s82.944 184.32 184.832 184.832c33.28 0 64.512-9.216 91.648-24.576l136.192 136.192 57.856-57.856zM655.36 655.36c-56.32 0-102.4-46.08-102.4-102.4 0-27.136 10.752-53.248 29.696-72.192 19.456-19.456 45.056-30.208 72.192-30.208 56.832 0 102.912 46.08 102.912 102.912 0 27.136-10.752 53.248-29.696 72.192-19.456 19.456-45.056 29.696-72.704 29.696z" fill="#1296db" p-id="6324"></path><path d="M678.4 772.608c-70.656 62.976-131.584 100.352-166.4 119.296-54.272-29.184-172.544-104.448-292.864-251.904C81.92 470.528 81.92 395.264 81.92 354.816 81.92 226.816 184.832 122.88 311.808 122.88c60.416 0 110.08 15.872 147.456 47.616l52.736 45.056 52.736-45.056c37.376-31.744 87.04-47.616 147.456-47.616 126.464 0 229.888 103.936 229.888 231.936 0 46.592-9.216 103.424-75.264 201.728 21.504 15.36 45.056 32.256 66.56 47.616C1011.712 488.448 1024 416.256 1024 354.816 1024 181.76 884.224 40.96 712.192 40.96c-76.288 0-146.432 21.504-200.192 67.072C457.728 62.464 388.096 40.96 311.808 40.96 139.776 40.96 0 181.76 0 354.816 0 430.592 18.432 522.24 155.648 691.2c179.712 221.184 356.352 291.84 356.352 291.84s98.816-39.424 223.744-151.552l-57.344-58.88z" fill="#1296db" p-id="6325"></path></svg>
            体检
          </div>
          <div className="fuwu_b2_2_3">
            <svg t="1739001193347" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4431" width="200" height="200"><path d="M289.555745 110.421902c-17.251919 0-31.229259 13.978363-31.229259 31.229259l0 31.229259c0 17.251919 13.978363 31.229259 31.229259 31.229259 17.251919 0 31.229259-13.978363 31.229259-31.229259l0-31.229259C320.785004 124.400265 306.807664 110.421902 289.555745 110.421902z" fill="#1296db" p-id="4432"></path><path d="M476.933343 110.421902c-17.251919 0-31.229259 13.978363-31.229259 31.229259l0 31.229259c0 17.251919 13.978363 31.229259 31.229259 31.229259 17.251919 0 31.229259-13.978363 31.229259-31.229259l0-31.229259C508.163625 124.400265 494.185262 110.421902 476.933343 110.421902z" fill="#1296db" p-id="4433"></path><path d="M960.069969 427.445232c0-65.295122-52.66957-118.4129-117.405967-118.4129s-117.405967 53.116755-117.405967 118.4129c0 53.714366 35.68371 99.116415 84.376713 113.550149l0 234.734162c0 42.147936-28.362978 77.748758-61.930491 77.748758L481.103316 853.478302c-24.12342 0-46.437635-16.590863-54.265928-40.348963-7.772011-23.597441-8.42488-60.792575-8.132214-85.180008l119.753431 0c68.355831 0 122.6719-52.710502 138.38886-134.291542 0.172939-0.925069 0.304945-1.860371 0.406253-2.795673l31.564903-315.26529c0.101307-1.036609 0.152473-2.074242 0.152473-3.110851 0-79.924307-55.302537-140.198066-128.649032-140.198066-17.251919 0-31.229259 13.978363-31.229259 31.229259s13.978363 31.229259 31.229259 31.229259c44.892443 0 65.651232 39.261189 66.180282 76.28543l-31.249725 312.133973C607.516424 621.451808 582.935586 665.48979 538.459628 665.48979L235.332796 665.48979c-41.934065 0-70.744227-41.903366-76.722382-81.58104l-31.321356-312.87587c0.529049-37.024242 21.287839-76.28543 66.180282-76.28543 17.251919 0 31.229259-13.978363 31.229259-31.229259s-13.978363-31.229259-31.229259-31.229259c-73.346495 0-128.649032 60.273758-128.649032 140.198066 0 1.036609 0.051165 2.074242 0.152473 3.110851l31.55467 315.26529c0.051165 0.457418 0.101307 0.914836 0.172939 1.362021 9.769504 67.451228 60.527538 135.725194 138.632407 135.725194L356.237447 727.950354c-0.354064 28.901237 0.568958 72.197322 11.271718 104.719017 16.417925 49.802266 62.062498 83.268472 113.594151 83.268472l266.600941 0c68.589145 0 124.390032-62.896492 124.390032-140.208299L872.094288 541.930683C922.607752 528.706497 960.069969 482.465337 960.069969 427.445232zM842.664002 483.388359c-30.293957 0-54.946426-25.099654-54.946426-55.943127 0-30.853705 24.65247-55.95336 54.946426-55.95336 30.293957 0 54.946426 25.099654 54.946426 55.95336C897.610428 458.288704 872.957959 483.388359 842.664002 483.388359z" fill="#1296db" p-id="4434"></path><path d="M352.015286 547.636638l0 52.049446c0 17.251919 13.978363 31.229259 31.229259 31.229259 17.251919 0 31.229259-13.978363 31.229259-31.229259l0-52.049446c0-17.251919-13.978363-31.229259-31.229259-31.229259C365.992625 516.40738 352.015286 530.385742 352.015286 547.636638z" fill="#1296db" p-id="4435"></path><path d="M296.794613 290.957675c11.208273 18.044982 41.96988 48.582485 86.140892 48.582485 43.957141 0 75.095325-30.30419 86.567611-48.217165 9.219989-14.394848 5.03262-33.354666-9.240455-42.747593-14.267958-9.403161-33.57263-5.408173-43.153846 8.752338-0.132006 0.193405-13.612019 19.751856-34.172287 19.751856-19.99131 0-32.42448-18.105357-33.262568-19.36607-9.174963-14.425547-28.281113-18.817578-42.828434-9.759271C292.188712 257.054517 287.691281 276.309046 296.794613 290.957675z" fill="#1296db" p-id="4436"></path></svg>
            问诊
          </div>
        </div>
      </div>

      <div className="fuwu_b3"></div>

      <div className="fuwu_b4">
        <div className="fuwu_b4_1">
          <div className="fuwu_b4_1_1">
            <div className="fuwu_b4_1_1_1">附近医院</div>
            <div className="fuwu_b4_1_1_2">
              <RightOutline fontSize={15} />
            </div>
          </div>
        </div>
        <div className="fuwu_b4_2">
          <div className="fuwu_b4_2_1">
            <ul>
              {
                hospitals.map((ele, index) => {
                  return <li key={ele.id}>
                    <div className="fuwu_b4_2_1_1">
                      <div className="fuwu_b4_2_1_1_1">
                        <img src={ele.img} alt="" />
                      </div>
                      <div className="fuwu_b4_2_1_1_2"></div>
                    </div>
                    <div className="fuwu_b4_2_1_2">
                      <p className="p1">
                        <div>三甲</div>
                        <div>{ele.name}</div>
                      </p>
                      <p className="p2">
                        特色科室：{ele.sp_department}
                      </p>
                      <p className="p3">
                        {ele.distance}  |  {ele.address}
                      </p>
                    </div>
                  </li>
                })
              }
            </ul>
          </div>
        </div>
      </div>

      <div className="fuwu_b5"></div>

      <div className="fuwu_b6">
        <div className="fuwu_b6_1">
          <div className="fuwu_b6_1_1">推荐套餐</div>
          <div className="fuwu_b6_1_2">
            <RightOutline fontSize={15} />
          </div>
        </div>
        <div className="fuwu_b6_2">
          <ul>
            {
              packages.map((ele, index) => {
                return <li key={ele.id}>
                  <div className="fuwu_b6_2_1">
                    <div className="fuwu_b6_2_1_1">
                      <img src={ele.img} />
                    </div>
                    <div className="fuwu_b6_2_1_2"></div>
                  </div>
                  <div className="fuwu_b6_2_2">
                    <p className="p1">
                      <div>三甲</div>
                      <div>{ele.name}</div>
                    </p>
                    <p className="p2">青年体验  |  入职体检</p>
                    <p className="p3">
                      <div>在线报告</div>
                      <div></div>
                    </p>
                    <p className="p4">
                      <span>￥{ele.price}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>已售{ele.sold}</span>
                    </p>
                    <p className="p5">
                      <div>最近 {ele.address} {ele.distance}</div>
                      <div>
                        <RightOutline fontSize={15} />
                      </div>
                    </p>
                  </div>
                </li>
              })
            }
          </ul>
        </div>
      </div>

      <div className="fuwu_b7"></div>

      <div className="fuwu_b8">
        <div className="fuwu_b8_1">
          <div className="fuwu_b8_1_1">本地名医</div>
          <div className="fuwu_b8_1_2">
            <RightOutline fontSize={15} />
          </div>
        </div>
        <div className="fuwu_b8_2">
          <ul>
            {
              doctors.map((ele, index) => {
                return <li key={ele.id}>
                  <div className="fuwu_b8_2_1">
                    <div className="fuwu_b8_2_1_1">
                      <img src={ele.img} />
                    </div>
                    <div className="fuwu_b8_2_1_2"></div>
                  </div>
                  <div className="fuwu_b8_2_2">
                    <p className="p1">
                      <div>{ele.name}</div>
                      <div>{ele.job}</div>
                      <div>{ele.section}</div>
                    </p>
                    <p className="p2">
                      <div>三甲</div>
                      <div>{ele.hospital}</div>
                    </p>
                    <p className="p3">
                      <div>擅长</div>
                      <div>
                        <div className="d1">{ele.be_good_at[0].name}</div>
                        <div className="d2">{ele.be_good_at[1].name}</div>
                        <div className="d3">{ele.be_good_at[2].name}</div>
                        <div className="d4">{ele.be_good_at[3].name}</div>
                      </div>
                    </p>
                    <p className="p4">
                      <div>{ele.issue}条问题</div>
                      <div>
                        <span className="sp1">{ele.po_rate}</span>&nbsp;&nbsp;<span className="sp2">好评率</span>
                      </div>
                    </p>
                    <p className="p5">
                      <div>
                        <span className="sp1">图文</span>&nbsp;<span>￥{ele.text_price}</span>
                      </div>
                      <div>
                        <span className="sp1">电话</span>&nbsp;<span>￥{ele.tel_price}</span>
                      </div>
                      <div>问医生</div>
                    </p>
                  </div>
                </li>
              })
            }
          </ul>
        </div>
      </div>
      <div className="fuwu_b9"></div>
    </div>
  );
}